<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>顺一药房</title>
<jsp:include page="header.jsp"></jsp:include>
<style>
	.weui-tabbar__item:nth-child(2) {
		border-left: #eee solid 1px;
	}
	.weui-tabbar__item:nth-child(3) {
		border-left: #eee solid 1px;
	}
	.wy-pro-pri.my-decode {
		
		color: black;
	}
	.wy-pro-pri.my-decode span {
		text-decoration:line-through;
	}
	.wy-pro-list .proimg img {
		display:block;
		width: 100%;
		height: 100%;
	}
	.my-so {
		color: #000;
		font-size: 14px;
		margin-left: 5px;
		padding-top: 3px;
	}
</style>
</head>
<body ontouchstart>
<!--顶部搜索-->
<header class='weui-header'>
  <div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索您想要的药品" required>
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
        <i class="weui-icon-search"></i>
        <span>搜索您想要的药品</span>
      </label>
    </form>
    <!-- class="weui-search-bar__cancel-btn" -->
    <a href="javascript:"  class="my-so" id="searchCancel">搜索</a>
  </div>
</header>
<!--主体-->
<div class='weui-content'>
  <!--顶部轮播-->
  <div class="swiper-container swiper-banner">
    <div class="swiper-wrapper">
    <c:if test="${not empty plist}">
		<c:forEach var="bb" items="${plist}" varStatus="st">
      <div class="swiper-slide"><a href="${pageContext.request.contextPath }/phone/detail?id=${bb.id}"><img src="${pageContext.request.contextPath }${bb.goodsPic}" /></a></div>
     </c:forEach>
     </c:if>
    </div>
    <div class="swiper-pagination"></div>
  </div>
  <!--猜你喜欢-->
  <div class="wy-Module">
    <div class="wy-Module-tit-line"><span>药店推荐</span></div>
    <div class="wy-Module-con">
      <ul class="wy-pro-list clear">
      <c:if test="${not empty list}">
		<c:forEach var="app" items="${list}" varStatus="st">
        <li>
          <a href="${pageContext.request.contextPath }/phone/detail?id=${app.id}">
            <div class="proimg"><img src="${pageContext.request.contextPath }${app.goodsPic}"></div>
            <div class="protxt">
              <div class="name">${app.goodsName}</div>
              <div class="wy-pro-pri my-decode">¥<span>${app.goodsDecode}</span></div>
              <div class="wy-pro-pri">¥<span>${app.goodsPrice}</span></div>
            </div>
          </a>
        </li>
        </c:forEach>
        </c:if>
      </ul>
      <div class="morelinks"><a href="javascript:;">没有更多了</a></div>
    </div>
  </div>
</div>

<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <a href="/phone/shop" class="weui-tabbar__item weui-bar__item--on">
    <div class="weui-tabbar__icon foot-menu-home"></div>
    <p class="weui-tabbar__label">首页</p>
  </a>
  <a href="/phone/cart" class="weui-tabbar__item">
    <!-- <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
    <div class="weui-tabbar__icon foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="/phone/userInfo" class="weui-tabbar__item">
    <div class="weui-tabbar__icon foot-menu-member"></div>
    <p class="weui-tabbar__label">我的</p>
  </a>
</div>
<jsp:include page="foot.jsp"></jsp:include>
<script>
	$(".swiper-banner").swiper({
        loop: true,
        autoplay: 3000
      });
	$(".swiper-news").swiper({
		loop: true,
		direction: 'vertical',
		paginationHide :true,
        autoplay: 30000
      });
	 $(".swiper-jingxuan").swiper({
		pagination: '.swiper-pagination',
		loop: true,
		paginationType:'fraction',
        slidesPerView:3,
        paginationClickable: true,
        spaceBetween: 2
      });
	 $(".swiper-jiushui").swiper({
		pagination: '.swiper-pagination',
		paginationType:'fraction',
		loop: true,
        slidesPerView:3,
		slidesPerColumn: 2,
        paginationClickable: true,
        spaceBetween:2
      });
	 $('#searchCancel').click(function(){
		 var name =$('#searchInput').val();
		 if(''!=name){
			 //$.alert(name);
			 var url ="/phone/itemSearch?name="+name;
			 window.location.href=url;
		 }
	 });
</script>
</body>
</html>